* {
box-sizing: border-box;

}

body {
perspective: 600px;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.863);

}

div.container {
width: 200px;
height: 50px;
position: relative;
margin: 300px auto;
transition: all 10s ease-in-out;

}

div.container span {
width: 15px;
height: 15px;
position: absolute;
border-radius: 50%;
background-color: royalblue;
display: block;
padding: 20px;
transition: all 1s ease-in-out;
animation-name: SnakeLoading;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
text-align: center;
font-family: 'Nova Square', cursive;

}

.container span:first-of-type {
left: 7px;
width: 20px;
animation-delay: 0s;
transition: all 1s ease-in-out;

}

.container span:nth-of-type(2) {
left: 36px;
animation-delay: 0.2s;
transition: all 1s ease-in-out;

}

.container span:nth-of-type(3) {
left: 64px;
animation-delay: 0.4s;
transition: all 1s ease-in-out;
}

.container span:nth-of-type(4) {
left: 92px;
animation-delay: 0.6s;
transition: all 1s ease-in-out;
}

.container span:nth-of-type(5) {
left: 121px;
animation-delay: 0.8s;
transition: all 1s ease-in-out;

}

.container span:nth-of-type(6) {
left: 148px;
animation-delay: 1s;
transition: all 1s ease-in-out;
}

.container span:last-of-type {
left: 176px;
animation-delay: 1.2s;
transition: all 1s ease-in-out;

}


@keyframes SnakeLoading
{

0%{
background-color: rgb(0, 119, 255);
opacty:0.5;
transform:translateY(0);
box-shadow:15px 15px 15px 15px rgba(0, 0, 0, 0.602);
}


50%
{
background-color: rgb(0, 38, 255);
transform:translateY(-20px);
box-shadow:15px 15px 15px 15px rgba(0, 0, 0, 0.602);
opacty:1;
}


100%
{
color: blue;
transform:translateY(0);
box-shadow:15px 15px 15px 15px rgba(0, 0, 0, 0.602);
opacty:0.5;

}


}